<template>
  <div class="container">
    <!-- 导航固定定位 fixed -->
    <van-nav-bar fixed title="搜索结果" left-arrow @click-left="$router.back()" />
    <!-- 文章列表  @load是声明下拉获取数据方法 当频道没有数据的时候 自动执行-->
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load='onLoad'>
      <van-cell-group>
        <!-- 把服务器获取的数据 渲染到页面上 id需要 toString()一下 因为用了 json-bigint解决了id太长js不识别问题 -->
        <!-- @click点击事件 设置点击搜索到的文章进行动态路由携带文章i 值跳转到文章内容页面 让id强制转换成字符串.toString() -->
        <van-cell @click='$router.push("/detail?id="+item.art_id.toString())' v-for="item in list" :key='item.art_id.toString()'>
          <div class="article_item">
            <h3 class="van-ellipsis">{{item.title}}</h3>
            <div class="img_box">
              <van-image lazy-load :class='[{w33: item.cover.type === 3}, {w100: item.cover.type === 1}]' :key='index' v-for='(img, index) in item.cover.images' fit="cover" :src="img" />
            </div>
            <div class="info_box">
              <span>{{item.aut_name}}</span>
              <span>{{item.comm_count}} 评论</span>
              <span>{{item.pubdate|formatTime}}</span>
            </div>
          </div>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>
<script>
// 导入搜索接口的api
import { searchArticles } from '../../api/search'
export default {
  name: 'Sresult',
  data () {
    return {
      // 单次加载状态位(Vant提供)
      loading: false,
      // 列表是否完全加载完成的标志(Vant提供)
      finished: false,
      // 请求参数(携带关键字 通过pagenum pagesize 实现分页) 利用传统的分页方法 获取分页的文章列表
      queryData: {
        // 当前页码 让其显示第一页(最近接模糊搜索的值)
        pagenum: 1,
        // 每页的条数 (根据接口文件设置)
        pagesize: 10,
        // 查询关键字
        kw: ''
      },
      // 匹配的列表数据存储
      list: [],
      // 列表的总数 比对服务器总数目判断是否加载完毕
      total: 0
    }
  },
  methods: {
    // 获取分页数据 并且实现分页效果
    async onLoad () {
      // 页面加载时候 触发一次 如果不够一屏幕 自动调用一次 (Vant方法)
      // 比对搜索数据 获取服务器 数据
      const ret = await searchArticles(this.queryData)
      // 把服务器 获取的数据 储存到页面对象里 需要使用 push方法 因为分页是动态获取数据 需要用push添加 不覆盖之前数据4
      // ...是直接把所有数据全部添加进去 不用一个一个添加
      this.list.push(...ret.data.results)
      // 设置服务器数据的总数(根据服务器返回)
      this.total = ret.data.total_count
      // 单次页码 加载完成后 还原单次加载状态为(有数据刷新自动为true 需要手动设置为false)
      this.loading = false
      // 判断时候加载了全部数据 加载全部数据让其 finished 加载完毕状态位 设置为true
      if (this.list.length === this.total) { // total是服务器返回的 模糊搜素条目的总数 满足总条数后 把获取文章列表状态位设置为true
        // 如果以展示所有数据 那么 把finished 加载完毕状态位 设置为true
        this.finished = true
      } else {
        // 如果没有加载结束 继续获取数据(继续添加页码 服务器通过页码返回搜素数据的)
        this.queryData.pagenum += 1
      }
      console.log(this.total)
    }

  },
  created () {
    // 让页面一跳转 就获取动态路由携带的数据 用于比对服务 进行模糊数据展示
    this.queryData.kw = this.$route.query.kw
    console.log(this.list)
  }
}
</script>
<style scoped lang='less'>
.container {
  padding-top: 92px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.article_item {
  h3 {
    font-weight: normal;
    line-height: 2;
  }
  .img_box {
    display: flex;
    justify-content: space-between;
    .w33 {
      width: 33%;
      height: 180px;
    }
    .w100 {
      height: 360px;
      width: 100%;
    }
  }
  .info_box {
    color: #999;
    line-height: 2;
    position: relative;
    span {
      padding-right: 20px;
    }
  }
}
</style>
